  body, html {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .main {
           
        }

        .banner {
            position: absolute;
            top: 3%;
            width: 100%;
            text-align: center;
        }

        .rule {
            position: absolute;
            right: 0;
            top: 5%;
            z-index: 97;
        }

        .user {
            position: absolute;
            width: 50%;
            top: 25%;
            border: 3px solid #ddd;
            border-radius: 10px;
            left: 25%;
        }

        #head {
            position: absolute;
            border-radius: 100%;
            margin-top: -0.7rem;
            margin-left: -1.5rem;
        }

        .user p {
            margin-left: 8rem;
        }

        .user span {
            font-size: 24px;
        }

        .game {
            position: absolute;
            width: 74%;
            height: 49%;
          	top: 41%;
          	left: 14%;
        }

        .togo {
            position: absolute;
            width: 72%;
            height: 28%;
            text-align: center;
            margin-top: 38%;
            margin-left: 13%;
        }

            .togo img {
                max-width: 27%;
            }

        .content {
            position: absolute;
            width: 81%;
            height79 %;
            text-align: center;
            margin-top: 5%;
            margin-left: 3%;
        }

            .content img {
                max-width: 114%;
            }

        .participant {
        	  position: absolute;
            text-align: center;
            font-size: 26px;
            color: white;
            top:81%;
            left: 32%;
            
        }

        .my_btn {
        	position: absolute;
          text-align: center;
          top: 87%;
          left: 34%;
        }

        .jt {
            position: absolute;
				    top: 95%;
				    left: 48%;
        		}

            .jt img {
                max-width: 110%;
            }

        .new {
            width: 80%;
            height: 8rem;
            text-align: center;
        }

        .lnew_txt {
            position: absolute;
            display: inline-block;
            width: 26%;
            background: #fff;
            border: 1px solid #ddd;
            border-top-left-radius: 0.8rem;
            border-bottom-left-radius: 0.8rem;
            height: 3rem;
            line-height: 2.8rem;
            margin-right: 6rem;
            top: 101%;
            left: 5%;
            font-size: 28px;
        }

        .rnew {
            position: absolute;
            display: inline-block;
            width: 60%;
            background: #fff;
            border: 1px solid #ddd;
            border-top-right-radius: 0.8rem;
            border-bottom-right-radius: 0.8rem;
            height: 3rem;
            line-height: 2.8rem;
            margin-right: 6rem;
            top: 101%;
            left: 35%;
            font-size: 28px;
        }

        .draw_txt {
            position: absolute;
            width: 80%;
            left: 10%;
            color: white;
            font-size: 28px;
            line-height: 2rem;
            bottom: -35%;
        }

        .rule_txt {
            position: absolute;
            top: 5%;
            height: 75%;
            width: 100%;
            background-color: black;
            opacity: 0.8;
            display: none;
        }
        .rule_p{
        	position: absolute;
        	width: 80%;
        	top:15%;
        	left: 10%;
        	text-align: center;
        }
        .rule_txt p{
        	font-size: 32px;
        	top:20%;
        	left:20%;
        	line-height: 0.5rem;
        }
        .rule_txt span{
        	font-size: 32px;
        	top:20%;
        	left:20%;
        	line-height: 2rem;
        }

        .my_prize {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 66;
            background: rgba(0,0,0,0.8);
            display: none;
        }

        .my_popu {
            position: absolute;
            width: 76%;
            height: 65%;
            background: url(../img/Popup.png) no-repeat;
            top: 20%;
            left: 12%;
        }

        .my_win {
            position: absolute;
            top: 8%;
            left: 24%;
        }

        .my_close {
            position: absolute;
            width: 8%;
            top: 2%;
            left: 90%;
            z-index: 67;
        }

        .my_jt {
            position: absolute;
            top: 83%;
            left: 47%;
        }

        .winning {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 98;
            background: rgba(0,0,0,0.8);
            display:none;
        }

        .win_popu {
            position: absolute;
            width: 76%;
            height: 65%;
            background: url(../img/Popup.png) no-repeat;
            top: 20%;
            left: 12%;
        }

        .win_banner {
            position: absolute;
            top: 8%;
            left: 12%;
        }

        .prize {
            position: absolute;
            top: 28%;
            left: 16%;
        }

        .tosee {
            position: absolute;
            top: 66%;
            left: 31%;
            max-width: 42%;
        }

        .continue {
            position: absolute;
            top: 76%;
             left: 31%;
             max-width: 42%;
             
        }

        .center {
            position: absolute;
            top: 59%;
            left: 12%;
            min-width: 78%;
        }

        .see_box {
            position: absolute;
            height: 60%;
            width: 66%;
            top: 20%;
            left: 22%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .content_box {
            width: 84%;
            height: 50%;
        }

            .content_box p {
                text-align: center;
                color: white;
                font-size: 36px;
                line-height: 2rem;
            }
        .get {
         position: absolute;
         width: 100%;
         height: 100%;
         top:0;
         display: none;
         z-index: 99;
         
        }
        .get img{
        	min-width: 100%;
        }
     
        .helper {
            position:absolute;
            width:40%;
            height:40%;
            top:23%;
            left:22%;
            display:none;
        }
        .changce_no {
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:rgba(0,0,0,0.8);
            z-index:66;
        }
         .changce0_popu {
            position: absolute;
            width: 76%;
            height: 65%;
            background: url(../img/Popup.png) no-repeat;
            top: 20%;
            left: 12%;
        }
        .changce0_header {
              position: absolute;
              top:10%;
              left:10%;
        }
        .cat{
            position:absolute;
            top:26%;
            left:36%;
        }
        .cat_txt {
            position:absolute;
            top:40%;
            left:11%;
        }
        .changce_more {
            position:absolute;
            top:63%;
            left:27%;
        }
        .back {
             position:absolute;
            top:74%;
            left:27%;
        }
       
        .ball{
        	position: absolute;
         width: 100%;
         height: 50%;
         top:0;
         display:none;
         z-index: 99;
        }
         #b1{
        	position:absolute;
        	top:50%;
        	left: 50%;
        	animation:mymove 7s infinite;
					animation-timing-function:linear;
					/* Safari and Chrome */
					-webkit-animation:mymove 7s infinite;
					-webkit-animation-timing-function:linear;
							}

						@keyframes mymove
						{
					from {left:58%;top:44%}
					to {left:85%;top:3%}
						}

						@-webkit-keyframes mymove /* Safari and Chrome */
						{
					from {left:58%;top:44%}
					to {left:68%;top:10%}
						}
        }
        #b2{
        	position:absolute;
        	top:32%;
        	left:62%;
        	animation:mymove1 5s infinite;
					animation-timing-function:linear;
					/* Safari and Chrome */
					-webkit-animation:mymove1 5s infinite;
					-webkit-animation-timing-function:linear;
							}

						@keyframes mymove1
						{
					from {left:62%;top:32%}
					to {left:85%;top:3%}
						}

						@-webkit-keyframes mymove1 /* Safari and Chrome */
						{
						from {left:62%;top:32%}
					to {left:85%;top:3%}
						}
						}
        }
        #b3{
        	position:absolute;
        		top:15%;
        	left:70%;
        	animation:mymove2 5s infinite;
					animation-timing-function:linear;
					/* Safari and Chrome */
					-webkit-animation:mymove2 5s infinite;
					-webkit-animation-timing-function:linear;
							}

						@keyframes mymove2
						{
					from {left:70%;top:15%}
					to {left:85%;top:3%}
						}

						@-webkit-keyframes mymove2 /* Safari and Chrome */
						{
					from {left:70%;top:15%}
						to {left:85%;top:3%}
						}
        }
         